<template>
  <div id="app">
    <div class="wrapper">
      <Modules :modules="modules"/>

      <div class="footer">
        <div>
          <span class="spt">简&nbsp;&nbsp;&nbsp;&nbsp;历</span>gitee.com/ahhTou/vue-cv
        </div>
        <div>
          <span class="spt">权益专区</span>app.10086.cn/cmcc-app/equityZone/equityZone.html
        </div>
        <div>
          <span class="spt">动感地带</span>app.10086.cn/cmcc-app/mZone/mZone.html
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import Space from './components/Space'

import CMCCLogo from '@/assets/cmcc-log.png'
import mZoneLogo from '@/assets/m-zone-logo.png'
import companyLogo from '@/assets/leadeon-logo.jpg'
import schoolLogo from '@/assets/school-logo.png'
import Modules from "./components/Modules";

export default {
  name: 'App',
  components: {Modules, Space},
  data() {
    return {
      modules: [
        {
          name: 'TypeA',
          data: {
            title: '个人简历',
            name: '王鹏博',
            age: '22',
            gender: '男',
          },
        },
        {
          name: 'TypeB',
          data: {
            list: [
              {
                name: '邮箱',
                msg: 'ahhTou@163.com',
              },
              {
                name: '手机号',
                msg: '189 0394 5909',
              }
            ],
          },
        },
        {
          name: 'Space',
          data: {
            height: 10,
          }
        },
        {
          name: 'TitleA',
          data: {
            title: '教育经历'
          }
        },
        {
          name: 'TypeC',
          data: {
            logo: schoolLogo,
            major: '软件工程（软件开发方向）',
            level: '本科',
            time: '2018.9 - 2022.6',
            title: '南阳师范学院',
          }
        },
        {
          name: 'TitleA',
          data: {
            title: '专业技能'
          }
        },
        {
          name: 'SkillA',
          data: {
            list: [
              {
                title: 'JavaScript',
                desc: '热爱JS。会使用JS、TS编写程序。了解ES6语法',
              },
              {
                title: 'Vue',
                desc: '能够熟练使用Vue2.0 框架。了解computed, watch等属性特性以及使用方法',
                bgColor: 'rgb(65,184,131)',
              },
              {
                title: 'React',
                desc: '能够使用React函数式组件配合Hooks，使用TSX编写页面代码。',
              },
            ]
          }
        },
        {
          name: 'SkillA',
          data: {
            list: [
              {
                title: 'CSS',
                desc: '熟悉Flex布局，会使用如Scss、Less等CSS预编译器。能够根据UI标注图快速绘制界面。',
              },
              {
                title: 'NodeJS',
                desc: '能够使用NodeJS配合Express、NestJS和MongoDB开发一些简单的后台应用',
                bgColor: 'rgb(65,184,131)',
              },
              {
                title: 'Java',
                desc: '会使用Java + SSM框架 + MySQL + SpringBoot编写简单的后台程序。',
              },
            ]
          }
        },
        {
          name: 'Space',
          data: {
            height: 10,
          }
        },
        {
          name: 'TitleA',
          data: {
            title: '工作经历',
          }
        },
        {
          name: 'Space',
          data: {
            height: 10,
          }
        },
        {
          name: 'CompanyA',
          data: {
            logo: companyLogo,
            companyName: '西安绿点信息科技有限公司',
            companyStayTime: '2021.9月 - 至今',
          }
        },
        {
          name: 'MDTip',
          data: {
            title: '简介',
            list: ['公司业务主要为中国移动开发手机客户端，包括前台、后台、数据库、产品、测试、运营等',
              '本人职责主要是负责 H5 页面开发，入职一个月后，可以胜任大部分工作']
          }
        },
        {
          name: 'Space',
          data: {
            height: 5,
          }
        },
        {
          name: 'CompanyB',
          data: {
            logo: CMCCLogo,
            projectName: '权益专区一期 / 二期',
            status: '已上线',
            nameTip: '',
            desc: ['indent,xxl,一期 快速开发自己的部分，',
              'append,xxl,解决了遗留的tab栏切换页面跳动的兼容性问题。封装了通用角标、加载组件',
              'indent,xxl,二期 负责开发、上线、处理后续BUG、完成瀑布流左右均匀分配效果',
              'append,xxl,封装了通用的UI加载组件及控制类。'],
          }
        },
        {
          name: 'CompanyB',
          data: {
            logo: CMCCLogo,
            projectName: '协助平台前端开发',
            status: "已下车",
            nameTip: '',
            desc: ['indent,xxl,协助二级运营平台前端开发，需要阅读、修改、部分重构上千行的Vue文件，和平台后台人员沟通开发一些新的组件、功能'],
          }
        },
        {
          name: 'CompanyB',
          data: {
            logo: CMCCLogo,
            projectName: '新帐单无障碍',
            status: '已上线',
            nameTip: '独立开发',
            desc: ['indent,xxl,根据需求，设置无障碍焦点、无障碍阅读文本']
          }
        },
        {
          name: 'CompanyB',
          data: {
            logo: mZoneLogo,
            status: '即将上线',
            see: {
              title: '项目灰度地址(模拟数据)',
              url: 'https://app.10086.cn/cmcc-app-test/mZone/mZone.html?mode=mock'
            },
            projectName: '动感地带',
            nameTip: '独立开发',
            desc: [
              'indent,xxl,该项目是中国移动APP客户端首页之一，',
              'append,xxl,开发时按照要求快速完成UI验收。',
              'append,xxl,封装了多种角标复合图标UI组件。',
              'append,xxl,初始化流程、缓存读取、api调用的封装，精简、提高代码可读性。引入自己写的接口工具类，提高开发效率。',
            ],
          }
        },
      ],
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/common.scss";

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#app {
  display: flex;
  justify-content: center;
  padding: 10px;
}


.wrapper {
  max-width: 610px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 900px;
  border: solid $c2 3px;
  overflow: hidden;
  background: white;

  .top-line {
    display: flex;
    justify-content: space-between;
  }


  .tip {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 7px;
    margin-left: 8px;
    z-index: 100;
  }

  .flex1 {
    flex: 1;
  }

  .footer {
    position: absolute;
    bottom: 5px;
    left: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 8px;
    color: rgb(200, 200, 200);


    .spt {
      padding: 0 3px;
      color: rgb(150, 150, 150);
      letter-spacing: 3px;
    }
  }


  .md-tip {
    margin: 5px 0;
    padding: 3px 12px;
    line-height: 1.8;
    font-size: 10px;
    border-left: 3px solid rgb(200, 200, 200);
    color: rgb(180, 180, 180);
  }

  .md-grey {
    color: rgb(180, 180, 180);
  }

  .md-b {

  }

}
</style>
